<template>
  <div class="colum_pop">
    <van-popup v-model:show="internalShow" position="bottom" :style="{ height: '100%' }">
      <div class="pop_top">
        <div class="left_block">
          <img src="@/assets/images/ic_close_dash@2x.png" alt="" class="close_img" @click="handleClose" />
          <img src="@/assets/images/logo@2x.png" alt="" class="logo_wrap" @click="routerJump('goHome')" />
        </div>
        <div class="right_block">
          <div class="diamon_wrap" @click="goMyDiamonds">
            <img src="@/assets/images/ic_star_24@2x.png" class="diamon_img" />
            <span class="num">{{ getBalance }}</span>
          </div>
          <div class="login_btn" @click="goLogin" v-if="!authStore.isAuthenticated">
            <img src="@/assets/images/ic_login@2x.png" alt="" />
            <span class="text">{{ "Log in" }}</span>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="content_block">
        <div class="wrap_block" @click="routerJump('goHome')">
          <div class="block_left">
            <div class="cover_img_wrap">
              <img src="@/assets/images/ic_home@2x.png" alt="" />
            </div>
            <div class="word_wrap">
              <div class="name">Home</div>
            </div>
          </div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
        <div class="wrap_block" @click="routerJump('goAIremovePage')">
          <div class="block_left">
            <div class="cover_img_wrap">
              <img src="@/assets/images/ic_remove@2x.png" alt="" />
            </div>
            <div class="word_wrap">
              <div class="name">AI Remove</div>
              <div class="dec">Remove everything</div>
            </div>
          </div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
        <div class="wrap_block" @click="routerJump('goPosePage')">
          <div class="block_left">
            <div class="cover_img_wrap">
              <img src="@/assets/images/ic_pose@2x.png" alt="" />
            </div>
            <div class="word_wrap">
              <div class="name">AI Pose</div>
              <div class="dec">Generate sexy pose photos</div>
            </div>
          </div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
        <div class="wrap_block" @click="routerJump('goDiamonDetail')">
          <div class="block_left">Gems detail</div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
        <div class="wrap_block" @click="routerJump('goSuportCenter')">
          <div class="block_left">Support Center</div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
        <div class="wrap_block" @click="goLogin" v-if="!authStore.isrealLogin">
          <div class="block_left">
            {{ "Log in" }}
          </div>
          <div class="block_rigth">
            <img src="@/assets/images/ic_next@2x.png" alt="" class="close_img" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog, showDialog } from "vant";
import { useAuthStore } from "@/stores/authStore";

const authStore = useAuthStore();

const props = defineProps(["show", "balance"]);
const emit = defineEmits(["close"]);

const internalShow = ref(props.show);
const getBalance = ref(props.balance)

const router = useRouter();

// 监听父组件传来的 show 值
watch(
  () => props.show,
  (newVal) => {
    internalShow.value = newVal;
  }
);

// 关闭
const handleClose = () => {
  internalShow.value = false;
  emit("close");
};

const routerJump = (name) => {
  // 关闭弹窗
  // internalShow.value = false
  handleClose();
  let jumpUrl = "";
  switch (name) {
    case "goPersonCneter":
      jumpUrl = "/me";
      break;
    case "goAIremovePage":
      // jumpUrl = "/removeAll";
      jumpUrl = "/";
      break;
    case "goPosePage":
      jumpUrl = "/createStep";
      break;
    case "goDiamonDetail":
      jumpUrl = "/diamondsDetails";
      break;
    case "goSuportCenter":
      jumpUrl = "/supportCenter";
      break;
    default:
      jumpUrl = "/";
  }
  router.push(jumpUrl);
};

const goMyDiamonds = () => {
  router.push('/myDiamonds');
}

const goLogin = () => {
  // 如果没有登录，就弹登录弹框；
  // 如果已经登录，提示是否退出
  if (authStore.isAuthenticated) {
    // 提示退出登录
    showConfirmDialog({
      confirmButtonText: "Log out",
      cancelButtonText: "Cancel",
      message: "Are you sure you want to log out?",
    })
      .then(() => {
        showDialog({
          message: "Logged out",
          confirmButtonText: "OK",
        }).then(() => {
          // on close
          authStore.logout();
          handleClose();
        });
      })
      .catch(() => {
        // on cancel
      });
  } else {
    authStore.showLoginDialog(); // 触发登录弹窗
    authStore.isLogin = true
  }
};
</script>

<style scoped lang="less">
.colum_pop {
  background: #ccc;

  .van-popup {
    z-index: 9999;
    background: #ebeffc;
  }

  .pop_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background: #ebeffc;

    .left_block {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .close_img {
        width: 32px;
      }

      .logo_wrap {
        width: 96px;
        margin: 0 13px;
      }
    }

    .right_block {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .diamon_wrap {
        display: flex;
        justify-content: center;
        align-items: center;

        .diamon_img {
          width: 24px;
        }

        .num {
          font-size: 18px;
          color: rgba(0, 0, 0, 0.95);
          margin-left: 4px;
        }
      }

      .login_btn {
        height: 38px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.45);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
        margin-left: 11px;

        img {
          width: 16px;
        }

        .text {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.95);
          margin-left: 8px;
        }
      }
    }
  }

  .content_block {
    height: calc(100vh - 56px);
    background: rgba(255, 255, 255, 0.75);
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    box-sizing: border-box;
    padding: 16px 20px;
    overflow: hidden;

    .wrap_block {
      height: 64px;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;

      .block_left {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.95);

        .cover_img_wrap {
          width: 40px;
          height: 40px;
          margin-right: 16px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .word_wrap {
          display: flex;
          flex-direction: column;
          justify-content: left;

          .name {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.95);
          }

          .dec {
            font-size: 13px;
            color: rgba(0, 0, 0, 0.45);
          }
        }
      }

      .block_rigth {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 16px;
        }
      }
    }
  }
}
</style>
